<mat-menu class="sub-menu" #childMenu="matMenu" [overlapTrigger]="false">
  @for (item of content.child; track item) {
    <div>
      <ng-container *reqRolesIf="item">
        @if (item.child && item.child.length > 0) {
          <div>
            <button mat-menu-item [matMenuTriggerFor]="menu.childMenu">
              @if (item.icon) {
                <mat-icon>{{ item.icon }}</mat-icon>
              }
              <app-link [content]="item" />
            </button>
            <app-sub-menu #menu [content]="item" />
          </div>
        }
        @if (!item.child || item.child.length === 0) {
          <div>
            <button mat-menu-item>
              @if (item.icon) {
                <mat-icon>{{ item.icon }}</mat-icon>
              }
              <app-link [content]="item" />
            </button>
          </div>
        }
      </ng-container>
    </div>
  }
</mat-menu>
